<%--
  Created by 吴凯
  User: 20426
  Date: 2020/7/20
  Time: 16:33
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>影院票务管理系统</title>
    <link rel="stylesheet" href="${pageContext.request.contextPath}/front/style/CSS/normalize.css">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/front/style/CSS/index.css">
    <link rel="shortcut icon" href="${pageContext.request.contextPath}/front/style/IMG/Blogo.png" type="image/x-icon">
    <style>
        #new span{
            display: inline-block;
            width: 80px;
            padding: 10px;

        }
    </style>
</head>
<script src="${pageContext.request.contextPath}/front/style/JS/jquery-1.11.0.min.js"></script>
<script>
    $(document).ready(function () {
        //已进入index.jsp页面，就开始渲染newTop8,hotTop8,theUpcomingTop8
        $.ajax({
            async:true,
            type:"GET",
            url:"${pageContext.request.contextPath}/front/indexShow",
            data:{
            },
            dataType:"json",
            success:function (result) {
                //渲染最热top 8
                var hotMovieList = "";
                $.each(result.eightHotMovies,function (index,hotMovie) {
                    hotMovieList += "<dd>\n" +
                        "                            <div class=\"zhuL1_2_1\">\n" +
                        "                                <a href=\"#hotMovie\">\n" +
                        "                                    <img src=\"${pageContext.request.contextPath}/download/img?fileName="+hotMovie.filmCover+"\" alt=\"\">\n" +
                        "                                    <div>\n" +
                        "                                            <span>\n" +
                        "                                                "+hotMovie.filmName.substring(0,5)+"...\n" +
                        "                                            </span>\n" +
                        "                                        <span>\n" +
                        "                                                <i>"+hotMovie.score+"</i>\n" +
                        "                                            </span>\n" +
                        "                                    </div>\n" +
                        "                                    <i class=\"DIMAX3\"></i>\n" +
                        "                                </a>\n" +
                        "                            </div>\n" +
                        "                            <div class=\"zhuL1_2_2\">\n" +
                        "                                <a href=\"${pageContext.request.contextPath}/front/movieDetail.jsp?filmId="+hotMovie.filmId+"\">\n" +
                        "                                    详情\n" +
                        "                                </a>\n" +
                        "                            </div>\n" +
                        "\n" +
                        "                        </dd>"
                })
                $("#hotMovies").append(hotMovieList);

                //渲染即将上映的电影（时间在一周内上映）
                var upcomingMovies = "";
                $.each(result.theUpcomingMovies,function (index,upcomingMovie) {
                    upcomingMovies += " <dd>\n" +
                        "                        <div class=\"zhuL2_2\">\n" +
                        "                            <a href=\"#upcomingMovie\">\n" +
                        "                                <div class=\"zhuL2_2_1\">\n" +
                        "                                    <img src=\"${pageContext.request.contextPath}/download/img?fileName="+upcomingMovie.filmCover+"\" alt=\"\">\n" +
                        "                                    <div>\n" +
                        "                                        <span>"+upcomingMovie.filmName+"</span>\n" +
                        "                                    </div>\n" +
                        "                                </div>\n" +
                        "                            </a>\n" +
                        "                            <div class=\"zhuL2_2_2\">\n" +
                        "                                <span>敬请期待</span>\n" +
                        "                            </div>\n" +
                        "                            <div class=\"zhuL2_2_3\">\n" +
                        "                                <a href='${pageContext.request.contextPath}/front/movieDetail.jsp?filmId="+upcomingMovie.filmId+"'>预告片</a>\n" +
                        "                                <a href=\"${pageContext.request.contextPath}/front/movieDetail.jsp?filmId="+upcomingMovie.filmId+"\">详情</a>\n" +
                        "                            </div>\n" +
                        "                        </div>\n" +
                        "                        <div class=\"zhuL2_3\">\n" +
                        "                            "+upcomingMovie.filmReleaseTime.substring(5,10)+"上映\n" +
                        "                        </div>\n" +
                        "                    </dd>";
                })
                $("#upcomingMovies").append(upcomingMovies);

                //渲染即将上映的电影（时间在一周内上映）
                var newMoviie = "";
                $.each(result.eightNewMovies,function (index,newMovie) {
                    newMoviie += "<li><div><span>"+(index+1)+"</span> <span>"+newMovie.filmName+"</span> <span>"+newMovie.score+"分</span></div></li>";

                })
                $("#newMoviee").append(newMoviie);


            },
            error:function () {
                alert("异步请求失败!");
            }
        })
    })
</script>
<body>
<!-- 顶部 -->
<header class="dingbu">
    <nav>
        <a href="#" class="logo"></a>
        <ul class="navbar">
            <li>
                <a href="${pageContext.request.contextPath}/front/index.jsp">首页</a>
            </li>
            <li>
                <a href="${pageContext.request.contextPath}/front/movie.jsp">电影</a>
            </li>
            <li>
                <a href="${pageContext.request.contextPath}/front/filmRank.jsp">排行榜</a>
            </li>
            <li>
                <a href="${pageContext.request.contextPath}/front/screening.jsp">场次安排</a>
            </li>
            <li>
                <a href="${pageContext.request.contextPath}/front/vipRecharge.jsp">会员卡</a>
            </li>
            <li>
                <a href="${pageContext.request.contextPath}/front/userOrders.jsp">个人信息</a>
            </li>
        </ul>

        <div class="sousuo">
        </div>
        <div class="denglu bian">
            <a href="#">
                <img src="${pageContext.request.contextPath}/front/style/IMG/avatar.png" alt="">
            </a>
            <span class="sanjiao"></span>
            <div>
                <a id="showStatus" href="${pageContext.request.contextPath}/front/accountLogin.jsp">登录</a>
            </div>
        </div>
    </nav>
</header>
<!-- 轮播 -->
<article class="lunbo">
    <div class="lunbo1">
        <a id="a1" class="lun">1</a>
        <a id="a2" class="lun">2</a>
        <a id="a3" class="lun">3</a>
        <a id="a4" class="lun">4</a>
        <a id="a5" class="lun">5</a>
        <div id="photos" class="lunbo1_lun .photos">
            <a href="#">
                <img src="${pageContext.request.contextPath}/download/img?fileName=background.jpg">            </a>
            <a href="#">
                <img src="${pageContext.request.contextPath}/download/img?fileName=background1.jpg">            </a>
            <a href="#">
                <img src="${pageContext.request.contextPath}/download/img?fileName=background2.jpg">            </a>
            <a href="#">
                <img src="${pageContext.request.contextPath}/download/img?fileName=background3.jpg">            </a>
            <a href="#">
                <img src="${pageContext.request.contextPath}/download/img?fileName=background4.jpg">            </a>
        </div>
    </div>
</article>

<div class="lunbo2">

</div>
<!-- 主体 -->
<div class="mian">
    <div class="mian1">
        <article>
            <!-- 正在热映 -->
            <div class="zhuL1">
                <div class="zhuL1_1">
                    <span class="zhuL1_1_1">最热Top8</span>
                    <span class="zhuL1_1_2">
                            <span class="zhuL1_1_2_2"></span>
                        </span>
                </div>
                <div class="zhuL1_2">
                    <dl id="hotMovies">
                    </dl>
                </div>
            </div>
            <!--即将上映 -->
            <div class="zhuL2">
                <div class="zhuL2_1">
                    <span class="zhuL2_1_1">即将上映</span>
                    <span class="zhuL2_1_2">
                            <span class="zhuL2_1_2_2"></span>
                        </span>
                </div>
                <dl id="upcomingMovies">

                </dl>
            </div>
            <div class="zhuL3"></div>
        </article>
        <aside>
            <div class="" id="new">
                <div class="zhuR1_1">
                    <span>最新热映</span>
                </div>
                <div class="zhuR1_2">
                    <ul id="newMoviee">
                    </ul>
                </div>
            </div>
        </aside>
    </div>
</div>
</body>
<script type="text/javascript">
    // 判断是否登录
    var account = "${sessionScope.account}";
    if(account != ""){
        $(".denglu img").prop("src","${pageContext.request.contextPath}/download/img?fileName=${sessionScope.account.accountPicture}");
        $("#showStatus").text("退出登录");
        $("#showStatus").prop("src","#");
    }
    $(document).on("click","#showStatus",function(){
        if($(this).text()=="退出登录"){
            $.ajax({
                url:"${pageContext.request.contextPath}/front/logout",
                success:function(){
                    console.log("退出成功");
                },
                error:function(){
                    console.log("退出失败");
                }
            });
        }
    })

</script>

</html>
